<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="keywords" content="tvvm, TVVM, TV Web App framework, focus, keybind, vue" />
    <meta name="description" content="A simple micro-library for agile building TV web app with no dependency | 轻量级电视web应用开发框架" />
    <title>TVVM</title>
    <link rel="stylesheet" href="./style/common.css" />
    <link rel="stylesheet" href="./style/iconfont.css" />
    <link rel="stylesheet" href="./style/home.css" />
    <link rel="stylesheet" href="./style/tomorrow.css" />
    <link rel="shortcut icon" href="./favicon.ico" />
    <script src="./scripts/highlight.pack.js"></script>
    <script>
      hljs.initHighlightingOnLoad();
    </script>
    <script src="https://unpkg.com/tvvm/dist/tvvm.min.js"></script>
    <script src="../dist/tvvm.js"></script>
  </head>
  <body>
    <div id="tv">
      <nav class="navbar" t-class="data.nav.classList">
        <div class="logo">TVVM</div>
        <div class="link-list">
          <a style="font-weight: bold;">Home</a> <span>/</span>
          <a href="./pages/doc.html">Doc</a> <span>/</span>
          <a href="https://github.com/zexiplus/TVVM">Github</a>
        </div>
      </nav>
      <div class="container" @scroll="methods.handleScroll">
        <div class="tv-wrapper">
          <div class="tv">
            <div class="header-block">
              <div class="user-info">{{ data.userinfo.name }}</div>
              <div class="status-right">
                <div class="circle net-status" t-index="0-1">
                  <i class="iconfont icon-wifi1"></i>
                </div>
                <div class="circle sys-message" t-index="0-2">
                  <i class="iconfont icon-duihuaxinxi"></i>
                </div>
                <div class="circle sys-setting" t-index="0-3">
                  <i class="iconfont icon-shezhi1"></i>
                </div>
              </div>
            </div>
            <div class="block-container">
              <div
                class="block block-col block1"
                t-index="1-0, 2-0"
                real-focus="true"
              >
                <span>1-0,</span> <span>2-0</span>
              </div>
              <div class="block2">
                <div class="block block-row block2-1" t-index="1-1, 1-2, 1-3">
                  <span>1-1,</span> <span>1-2,</span> <span>1-3</span>
                </div>
                <div class="block2-2">
                  <div class="block block2-2-1" t-index="2-1">2-1</div>
                  <div class="block block2-2-2" t-index="2-2">2-2</div>
                  <div class="block block2-2-3" t-index="2-3">2-3</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="content-wrapper">
          <div class="download-wrapper" :style="data.downloadWrapper.style">
            <div class="symbol">
              <h1>TVVM</h1>
            </div>
            <span>轻量级响应式TV WEB应用开发框架</span>
            <div class="button-group">
              <div class="download-button" @click="methods.gotoDownload">download</div>
            </div>
          </div>

          <div class="content-1">
            <div class="feature-block">
              <a href="./pages/doc.html#focus-control">焦点控制</a>
              <div>
                <span class="feature-desc">
                  TV应用的特点是使用遥控器控制焦点移动， 从而进行下一步操作。
                  TVVM致力于减少焦点移动的代码逻辑， 通过配置t-index索引， 而非编程的方式解决焦点的移动。
                </span>
              </div>
            </div>
            <div class="feature-block">
              <a href="./pages/doc.html#event-optmize">按键优化</a>
              <span class="feature-desc">
                  某些物理遥控器在按下按钮时， 有可能高速重复触发按键事件， 这对应用会产生不良后果， 
                  TVVM在绑定事件的同时在内部会优化操作逻辑， 利用函数去抖控制按键触发频率， 防止因为物理设备差异导致应用逻辑混乱。
              </span>
            </div>
            <div class="feature-block">
              <a href="./pages/doc.html#data-drive">数据驱动</a>
              <span class="feature-desc">
                  TVVM与大多数mvvm思想的前端框架一样， 采用数据驱动的开发模式， 简单来讲，数据驱动使开发者只用关系数据的修改， 而无需手动将数据同步至视图。
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="control-wrapper" :style="data.remoteControl.style">
        <div class="remote-control">
          <div
            class="power"
            @click="methods.pressPower"
            @touchstart="methods.pressPower"
          >
            <i class="iconfont icon-power"></i>
          </div>
          <div class="compass">
            <div
              class="enter"
              @click="methods.pressEnter"
              @touchStart="methods.pressEnter"
            ></div>
            <i
              class="iconfont arrow arrow-left icon-zuojiantou"
              @click="methods.pressLeft"
              @touchStart="methods.pressLeft"
            ></i>
            <i
              class="iconfont arrow arrow-up icon-shangjiantou"
              @click="methods.pressUp"
              @touchStart="methods.pressUp"
            ></i>
            <i
              class="iconfont arrow arrow-right icon-youjiantou"
              @click="methods.pressRight"
              @touchStart="methods.pressRight"
            ></i>
            <i
              class="iconfont arrow arrow-down icon-xiajiantou"
              @click="methods.pressDown"
              @touchStart="methods.pressDown"
            ></i>
          </div>
          <div class="three-bar">
            <div
              class="dot home"
              @click="methods.pressHome"
              @touchStart="methods.pressHome"
            >
              <i class="iconfont icon-shouye"></i>
            </div>
            <div
              class="dot back"
              @click="methods.pressBack"
              @touchStart="methods.pressBack"
            >
              <i class="iconfont icon-back"></i>
            </div>
            <div
              class="dot menu"
              @click="methods.pressMenu"
              @touchStart="methods.pressMenu"
            >
              <i class="iconfont icon-menu"></i>
            </div>
          </div>
          <!-- <div class="volume"></div> -->
        </div>
      </div>
      <footer class="footbar"></footer>
    </div>
    <script src="./scripts/home.js"></script>
  </body>
</html>
